<div ng-class="{ 'pending': notification.isPending, 'has-link': notification.link }">
  <!-- Either the notification is shown as regular link to some source item -->
  <a ng-if="!notification.isFileDownload" ng-click="controller.openReference()">
    <div class="notification-icon">
      <i ng-if="notification.refType === 'DISCOVERY'" class="fa fa-binoculars"></i>
      <i ng-if="notification.refType === 'HUNT'" class="fa fa-crosshairs"></i>
      <i ng-if="notification.refType === 'FLOW'" class="fa fa-code-fork"></i>
      <i ng-if="notification.refType === 'CRON'" class="fa fa-history"></i>
      <i ng-if="notification.refType === 'VFS'" class="fa fa-hdd-o"></i>
      <i ng-if="notification.refType === 'CLIENT_APPROVAL'" class="fa fa-unlock"></i>
      <i ng-if="notification.refType === 'HUNT_APPROVAL'" class="fa fa-unlock"></i>
      <i ng-if="notification.refType === 'CRON_JOB_APPROVAL'" class="fa fa-unlock"></i>
    </div>

    <div class="notification-content">
      <grr-semantic-value value="::notification.value.message"></grr-semantic-value>
      <grr-timestamp value="::notification.value.timestamp" />
    </div>

    <div class="no-link-indicator" ng-if="!notification.link">
      <i class="fa fa-chain-broken"></i>
      This is a LEGACY notification (therefore it's not clickable)
    </div>
  </a>

  <div ng-if="notification.isFileDownload">
    <div class="notification-icon">
      <i class="fa fa-download"></i>
    </div>
    <div class="notification-content">
      <grr-semantic-value value="::notification.value.message"></grr-semantic-value>
      <grr-timestamp value="::notification.value.timestamp" />
    </div>
    <div class="no-link-indicator">
      <i class="fa fa-chain-broken"></i>
      This is a LEGACY file download notification (therefore it's not clickable)
    </div>
  </div>
</div>
